import { CloseOutlined } from '@ant-design/icons';
import { useHistory } from 'react-router';

import { Button, Space, Tabs, message, Popconfirm } from 'antd';
import styles from './index.less';

const HOME_PANE = {
  label: '首页',
  key: '/welcome',
  closable: false,
};

/**
 *  承接父组件传递过来的 panes(点击生成的快捷导航标题) activeKey(导航高亮的的key)
 */
interface Props {
  panes: any;
  setPanes: (action: any) => void;
  activeKey: any;
  setActiveKey: (action: string) => void;
}
const QuickNavigation: React.FC<Props> = (props) => {
  const { panes, setPanes, activeKey, setActiveKey } = props;

  const history = useHistory();

  // 点击切换时tab 显示高亮并且跳转相应界面
  const onChange = (key: string) => {
    setActiveKey(key);
    history.push(key);
  };

  // 关闭单个
  const remove = (targetKey: string) => {
    const targetIndex = panes.findIndex((pane: any) => pane.key === targetKey);
    const newPanes: any = panes.filter((pane: any) => pane.key !== targetKey);
    if (newPanes.length && targetKey === activeKey) {
      const { key } =
        newPanes[
          targetIndex === newPanes.length ? targetIndex - 1 : targetIndex
        ];
      setActiveKey(key);
      history.push(key);
    }
    setPanes(newPanes);
  };

  // 确认删除
  const confirm = (e: React.MouseEvent<HTMLElement>) => {
    setPanes((p: any) => p.slice(0, 1));
    history.replace(HOME_PANE.key);
    message.success('已全部关闭');
  };
  // 确认取消
  const cancel = (e: React.MouseEvent<HTMLElement>) => {
    console.log(e);
    message.error('已取消');
  };
  const style: any = {
    padding: '2px',
    height: '32px',
    border: '#f2f2f2',
    fontSize: '4px',
  };

  return (
    <div className={styles.titleNav}>
      <div className={styles.titleNavContent}>
        {!!panes.length && (
          <Tabs
            hideAdd
            className={styles.tabstyle}
            type="editable-card"
            items={panes}
            size={'small'}
            activeKey={activeKey}
            onChange={onChange}
            onEdit={remove}
            // tabBarStyle={{ background: '#eee' }}
            tabPosition="top"
            tabBarGutter={4}
            renderTabBar={(props, DefaultTabBar: any) => (
              <DefaultTabBar {...props} style={{ ...style }} />
            )}
            tabBarExtraContent={{
              right: (
                <>
                  <Popconfirm
                    title="是否要关闭全部标签"
                    onConfirm={confirm}
                    onCancel={cancel}
                    okText="Yes"
                    cancelText="No"
                  >
                    <Space>
                      <Button
                        type="text"
                        size={'small'}
                        className={styles.closeBut}
                        style={{ marginRight: '20px', fontSize: '12px' }}
                        icon={<CloseOutlined />}
                      >
                        关闭
                      </Button>
                    </Space>
                  </Popconfirm>

                  {/* <Button
                type="text"
                size={'small'}
                icon={<UndoOutlined />}
                onClick={() => {
                  onRefresh();
                }}
              >
                刷新
              </Button> */}
                </>
              ),
            }}
          />
        )}
      </div>
    </div>
  );
};

export default QuickNavigation;
